<template>
  <div v-html="output"></div>
</template>
<script setup lang="ts">
import { useVModel } from "@vueuse/core";
import { useHighlight } from "./composables";
import { ResolvedVueShikiInputProps, vueShikiInputProps } from "./types";
import { Ref, toRef } from "vue";

import './style.css'

const props = defineProps(vueShikiInputProps);
const emit = defineEmits(["update:modelValue"]);

const modelValue = useVModel(props, "modelValue", emit, {
  defaultValue: "",
  passive: true,
});


const propsRef = toRef(props) as Ref<ResolvedVueShikiInputProps>
const { output, loading, background } = useHighlight(modelValue, propsRef)


</script>
<style></style>
